<template>
    <div>
        <div class="outmain ba_f tangshi">
            <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                    <span>堂食订单</span>
                </div>
            </div>
            <el-tabs v-model="orderType" class="mar_b20" @tab-click="handleTabClick">
              <el-tab-pane label="订单管理" name="1"></el-tab-pane>
              <el-tab-pane label="待完成订单" name="2"></el-tab-pane>
              <el-tab-pane label="已完成订单" name="3"></el-tab-pane>
            </el-tabs>
            <div class="ba_f8 pad_20">
                <div class="lh25 msgtext fon_12">
                    温馨提示：此区域仅显示区域有餐桌的订单管理；<br>
                    1、未开台，是指空闲的餐桌；<br>
                    2、已开台，是指用户已确定了餐桌未点菜，或用户下了订单，商家暂未接单的状态；<br>
                    3、就餐中，是指用户已点菜下单的状态。
                </div>
            </div>
<!--            <div class="flex flex-y-top mar_t20">-->
<!--                <div class="mar_r40">-->
<!--                    <el-button type="primary" size="medium" @click="handleEdit">手动清台</el-button>-->
<!--                </div>-->
<!--            </div>-->
            <div class="mar_t20">
                <div class="quyu flex flex-wrap">
                    <div class="quyuli"
                         :class="{ 'quyuHover':index==typeListHover}"
                         v-for="(item,index) in areaList" :key="index"
                         @click="clickTypeList(item,index)">
                        {{item.name}}
                    </div>
                </div>
                <div class="flex-bet mar_t20 flex-y-top">
                    <div class="leibie flex-g-0 heighthv" v-show="tablesList && tablesList.length>0">
                        <div class="leibieli"
                             :class="{ 'leibieHover':jindex==jListHover}"
                             v-for="(J,jindex) in tablesList" :key="jindex"
                             @click="clickjList(J,jindex)">
                            <span v-show="J.name">{{J.name}}({{J.num}})</span>
                        </div>
                    </div>
                    <div class="zuozi flex-g-1">
                        <div class="zuoziWrap flex-wrap flex flex-y-top"
                             v-if="tablesList && tablesList.length>0 && tablesList[0].tableInfo">
                            <div class="zuozili flex-colbt"
                                 :class="{ 'zuoziliHover':kindex==kListHover}"
                                 v-for="(K,kindex) in tablesList[jListHover].tableInfo" :key="kindex"
                                 @click="orderDl(K)"
                            >
                                <div class="zuoziliT flex-bet" v-show="K.state=='1'">
                                    <div>{{K.name}}</div>
                                </div>
                                <div class="zuoziliT zuozili1 flex-bet" v-show="K.state=='2'">
                                    <div>{{K.name}}</div>
                                    <div class="mar_r10" @click.stop="deletePreview(K)">
                                        <a title="点击取消/清台"><i class="el-icon-error color_f"></i></a>
                                    </div>
                                </div>
                                <div class="zuoziliT zuozili2 flex-bet" v-show="K.state=='3'">
                                    <div>{{K.name}}</div>
                                    <div class="mar_r10" @click.stop="deletePreview(K)">
                                        <a title="点击取消/清台"><i class="el-icon-error color_f"></i></a>
                                    </div>
                                </div>
                                <div>
                                    <span v-show="K.state=='1'">未开台</span>
                                    <span v-show="K.state=='2'">已开台</span>
                                    <span v-show="K.state=='3'">就餐中</span>
                                </div>
                                <div v-show="K.state=='2' && K.orderInfo && !K.orderInfo.state">
                                    <span class="color_9">未下单</span>
                                </div>
                                <div v-show="K.state=='2' && K.orderInfo && K.orderInfo.state=='1'">
                                    <span class="color_rb">未接单</span>
                                </div>
                                <div class="flex-bet pad_lr_10" v-show="K.state=='1'">
                                    <div></div>
                                    <div class="color_9">{{K.maxNum}}座</div>
                                </div>
                                <div class="flex-bet pad_lr_10" v-show="K.state=='3' && K.orderInfo.people">
                                    <div v-show="K.orderInfo.receiptAt">{{timeStamp(Math.round(new
                                        Date().getTime()/1000).toString()-K.orderInfo.receiptAt)}}
                                    </div>
                                    <div class="color_9">{{K.orderInfo.people}}人</div>
                                </div>
                            </div>
                        </div>
                        <div class="flex-bet">
                            <div class="zhuozizt pad_10 flex">
                              状态：
                              <div class="zhuoziztli flex zhuoziztHover">
                                <div class="zt quanbu"></div>
                                <div>未开台</div>
                              </div>
                              <div class="zhuoziztli flex">
                                  <div class="zt yikaitai"></div>
                                  <div>已开台</div>
                              </div>
                              <div class="zhuoziztli flex">
                                <div class="zt daijiez"></div>
                                <div>就餐中</div>
                              </div>
                            </div>
                            <div class="flex mar_r10">
                                <div>结算模式：
                                    <span v-show="payMode=='1'" class="subjectcolor2">先结账后用餐</span>
                                    <span v-show="payMode=='2'" class="subjectcolor2">先用餐后结账</span>
                                </div>
                                <div class="mar_l20">点餐模式：
                                    <span v-show="orderMode=='1'" class="subjectcolor2">多人点餐</span>
                                    <span v-show="orderMode=='2'" class="subjectcolor2">拼桌点餐</span>
                                </div>
                                <!--              <el-pagination-->
                                <!--                      background-->
                                <!--                      layout="prev, pager, next"-->
                                <!--                      :total="page.total"-->
                                <!--                      :page-size="page.pagesize"-->
                                <!--                      :current-page.sync='page.currentPage'-->
                                <!--                      @current-change="handleCurrentChange">-->
                                <!--              </el-pagination>-->
                            </div>
                        </div>
                    </div>

                </div>


            </div>
        </div>
    </div>
</template>
<script>
    import {getStoreConfig} from "@/api/setup";
    import {getArea, getTableOrder,cleanTable} from "@/api/instore";
    import {changeDate} from "@/utils/index";

    export default {
        created() {
            this.getStoreConfig();
            this.fetchData();
        },
        data() {
            return {
                typeListHover: 0,
                jListHover: 0,
                kListHover: 0,
                typeList: [],
                areaList: [],
                tablesList: [],
                radio: '1',
                value: new Date(),
                page: {
                    total: 0,
                    size: 10,
                    currentPage: 1,
                },
                payMode:'',
                orderMode:'',
                orderType:'1',
            }
        },
        methods: {
            async getStoreConfig() {
                const {data} = await getStoreConfig({ident: 'instoreSet'});
                this.orderMode = data.orderMode
                this.payMode = data.payMode
            },
            async clickTypeList(item, index) {
                this.typeListHover = index
                if (item.id) {
                    const {data} = await getTableOrder({areaId: item.id});
                    this.tablesList = data ? data : [];
                }
            },
            clickjList(item, index) {
                this.jListHover = index
            },
            async fetchData() {
                const {data} = await getArea();
                this.areaList = data;
                if (data[0]) {
                    const data2 = await getTableOrder({areaId: data[0].id});
                    this.tablesList = data2.data ? data2.data : [];
                }
            },
            // async fetchData2() {
            //     const {data} = await getArea();
            //     this.areaList = data;
            // },
            setSelectRows(val) {
                this.selectRows = val;
            },
            handleCurrentChange(val) {
                this.page.currentPage = val;
                this.fetchData();
            },
            orderDl(item) {
                if(item.state=='1'){
                    this.$router.push(`/instoreorderdl?tableId=${item.id}&activeName=${'1'}`);
                }else if(item.state=='2'){
                    this.$router.push(`/instoreorderdl?tableId=${item.id}&activeName=${'1'}`);
                }else if(item.state=='3' && this.payMode=='2'){
                    this.$router.push(`/instoreorderdl?tableId=${item.id}&activeName=${'1'}`);
                }else {
                    this.$router.push(`/instoreorderdl?tableId=${item.id}&activeName=${'1'}`);
                }
            },
            async deletePreview(row){
                this.$baseConfirm("您确定清除此桌台吗", null, async () => {
                    const {msg} = await cleanTable({tableId:row.id});
                    this.$baseMessage(msg, "success");
                    this.fetchData()
                    this.typeListHover = 0
                });
            },
          handleTabClick(){
            if(this.orderType=='1'){
              this.$router.push(`/instoreorder?orderType=1`);
            }else if(this.orderType=='2'){
              this.$router.push(`/instoredwcorderquery?orderType=2`);
            }else if(this.orderType=='3'){
              this.$router.push(`/instoreorderquery?orderType=3`);
            }
          },
            timeStamp(second_time) {
                var time = parseInt(second_time) + "秒";
                if (parseInt(second_time) > 60) {
                    var second = parseInt(second_time) % 60;
                    var min = parseInt(second_time / 60);
                    time = min + "分" + second + "秒";
                    if (min > 60) {
                        min = parseInt(second_time / 60) % 60;
                        var hour = parseInt(parseInt(second_time / 60) / 60);
                        time = hour + "小时" + min + "分" + second + "秒";
                        if (hour > 24) {
                            hour = parseInt(parseInt(second_time / 60) / 60) % 24;
                            var day = parseInt(parseInt(parseInt(second_time / 60) / 60) / 24);
                            time = day + "天" + hour + "小时" + min + "分" + second + "秒";
                        }
                    }
                }
                return time;
            },
        },
    }
</script>
<style lang="scss">
    .tangshi {
        .quyu {
            border-bottom: 1px solid #e0e0e0;

            .quyuli {
                border-radius: 3px;
                cursor: pointer;
                padding: 15px;
                font-weight: bold;
            }

            .quyuHover {
                background: #155BD4;
                color: #fff;
            }
        }

        .leibie {
            height: 550px;
            border-right: 1px solid #e0e0e0;

            .leibieli {
                width: 160px;
                height: 44px;
                line-height: 44px;
                padding-left: 15px;
                cursor: pointer;
            }

            .leibieHover {
                background: #F0FAFF;
                color: #479BF2;
            }
        }

        .zuozi {
            .zuoziWrap {
                padding: 20px 0 0 20px;
                background: #f5f7f9;
                height: 550px;
                overflow: hidden;
                overflow-y: scroll;
            }

            .zuozili {
                padding-bottom: 10px;
                border-radius: 8px;
                background: #fff;
                width: 10%;
                height: 150px;
                margin-right: 30px;
                margin-bottom: 30px;
                text-align: center;
                cursor: pointer;

                .zuoziliT {
                    height: 40px;
                    line-height: 40px;
                    border-radius: 8px 8px 0 0;
                    text-align: left;
                    padding-left: 10px;
                    font-size: 16px;
                    font-weight: bold;
                }

                .zuozili1 {
                    background: #53C7A0;
                    color: #fff;
                }

                .zuozili2 {
                    background: #FEB101;
                    color: #fff;
                }

                .zuozili3 {
                    background: #ED6855;
                    color: #fff;
                }
            }

            .zuoziliHover {
                /*background: #0A96FF;*/
                /*color: #fff;*/
            }

            .zhuozizt {
                .zhuoziztli {
                    height: 30px;
                    line-height: 30px;
                    padding: 0 5px;
                    margin: 0 5px;
                    /*cursor: pointer;*/
                }

                /*.zhuoziztHover{*/
                /*  border-bottom: 2px solid #155BD4;*/
                /*}*/
                .zt {
                    width: 20px;
                    height: 20px;
                    text-align: center;
                    color: #fff;
                    border-radius: 2px;
                    margin-right: 5px;
                }

                .quanbu {
                    background: #999;
                }

                .yikaitai {
                    background: #53C7A0;
                }

                .daijiez {
                    background: #FEB101;
                    /*background: #ED6855;*/
                }

                /*.yiwanc{*/
                /*  background: #53C7A0;*/
                /*}*/
            }
        }
    }
</style>